<template>
  <view class="container">
    <!-- 商品图片展示 -->
    <!-- <swiper class="swiper" :indicator-dots="true" :autoplay="true">
      <swiper-item v-for="(image, index) in good.cover" :key="index">
        <image class="swiper-image" :src="image"></image>
      </swiper-item>
    </swiper> -->
	<view class="swiper">
		<image :src="good.cover"></image>
	</view>
    <!-- 商品介绍 -->
    <view class="description">
      <text class="name">{{ good.name }}</text><br>
      <text class="text">{{ good.description }}</text><br>
	  <text class="price">价格：{{ good.price+"￥" }}</text>
      <!-- 其他商品介绍内容 -->
    </view>

    <!-- 加入购物车 -->
    <button class="add-to-cart" @click="addToCart">加入购物车</button>
  </view>
</template>


<script>
	import good from '@/common/api/good/good.js'
	import shopcar from '@/common/api/shopcar/shopcar.js'
	export default {
		data() {
			return {
				good:'',
			}
		},
		mounted() {
		},
		//触底方法
		onReachBottom() {
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.id = option.id;
			this.getData();
		},
		methods: {
			getData(){
				good.getDataByGoodId(this.id)
					.then(res=>{
						this.good = res.data.good;
					})
			},
			addToCart(){
				shopcar.addShopCar(this.id)
					.then(res=>{
						uni.showToast({
							title:'已添加到购物车',
						})
					})
			}
		}
	}
</script>

<style>
.container {
  padding: 20rpx;
}

.swiper {
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.description {
  margin-top: 20rpx;
}

.name {
  font-size: 64rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.text {
  float: left;
  font-size: 52rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.price {
	float: left;
  font-size: 64rpx;
  font-weight: bold;
  color: #ff5000;
  margin-bottom: 10rpx;
}
.add-to-cart {
  margin-top: 20rpx;
  width: 100%;
  height: 60rpx;
  background-color: #ff5000;
  color: #fff;
  font-size: 28rpx;
  border-radius: 5rpx;
}
</style>